import {
  View,
  Text,
  RefreshControl,
  Button,
  StatusBar,
  StyleSheet,
  ScrollView,
  Switch,
  TouchableHighlight,
  Alert,
  Animated,
  Appearance,
  AppState,
  TextInput,
  Platform,
} from 'react-native';
import React, {useState, useRef, useEffect} from 'react';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

export default function Test() {
  const colorScheme = Appearance.getColorScheme();
  const [refresh, setRefresh] = useState(false);
  const [isEnabled, setIsEnabled] = useState(false);
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const appState = useRef(AppState.currentState);
  const [val, setVal] = useState('');
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      console.log('nextAppState', nextAppState);
    });
    return () => {
      subscription.remove();
    };
  }, []);

  const onRefresh = () => {
    setRefresh(true);
    setTimeout(() => {
      setRefresh(false);
    }, 2000);
  };
  const toggleSwitch = v => {
    setIsEnabled(v);
  };
  const onPress = () => {
    Alert.alert('标题', '内容', [
      // {
      //   text: 'Ask me later',
      //   onPress: () => console.log('Ask me later pressed'),
      // },
      {
        text: '取消',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      {text: '确定', onPress: () => console.log('OK Pressed')},
    ]);
  };

  const fadeIn = () => {
    console.log('colorScheme', colorScheme);

    // Will change fadeAnim value to 1 in 5 seconds
    // Animated.timing(fadeAnim, {
    //   toValue: 1,
    //   duration: 5000,
    //   useNativeDriver: true,
    // }).start();
  };

  const fadeOut = () => {
    // Will change fadeAnim value to 0 in 3 seconds
    // Animated.timing(fadeAnim, {
    //   toValue: 0,
    //   duration: 3000,
    //   useNativeDriver: true,
    // }).start();
  };

  const handleChange = text => {
    setVal(text);
  };

  const handlePress = () => {
    alert(val);
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <StatusBar backgroundColor="#ff8888" barStyle="default" />
        <View style={[styles.box]}>
          <Text>Current state is: {appStateVisible}</Text>
          <Text>1231</Text>

          <Button onPress={handlePress} title="点击" />
          {/* <Animated.View
            style={[
              styles.fadingContainer,
              {
                opacity: fadeAnim,
              },
            ]}>
            <Text style={styles.fadingText}>Fading View!</Text>
          </Animated.View>
          <View style={styles.buttonRow}>
            <Button title="Fade In View" onPress={fadeIn} />
            <Button title="Fade Out View" onPress={fadeOut} />
          </View> */}

          {/* <Switch
            trackColor={{false: '#767577', true: '#81b0ff'}}
            thumbColor={isEnabled ? 'green' : 'yellow'}
            ios_backgroundColor="#3e3e3e"
            onValueChange={toggleSwitch}
            value={isEnabled}
          />
          <TouchableHighlight onPress={onPress} activeOpacity={0.5}>
            <View style={styles.button}>
              <Text>Touch Here</Text>
            </View>
          </TouchableHighlight> */}
        </View>
        <TextInput
          style={styles.border}
          val={setVal}
          multiline={true}
          placeholder="请输入"
          numberOfLines={5}
          textAlignVertical="top"
          onChangeText={handleChange}
        />
        {/* <ScrollView
          contentContainerStyle={styles.container}
          refreshControl={
            <RefreshControl refreshing={refresh} onRefresh={onRefresh} />
          }>
          <Text>Pull down to see RefreshControl indicator</Text>
        </ScrollView> */}
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    // justifyContent: 'center',
  },
  box: {
    height: 200,
    backgroundColor: '#ff8888',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
  fadingContainer: {
    padding: 20,
    backgroundColor: 'powderblue',
  },
  fadingText: {
    fontSize: 28,
  },
  border: {
    borderWidth: 1,
    borderColor: 'green',
    // height: 30 * 4,
    // marginTop: 20,
    // width: 200,
  },
});
